<template>
  <div class="vpt-chart-panel">
    <div class="title">
      {{ itemData.name }}
      <!-- <img src="../../assets/img/theme3/info.png" /> -->
    </div>
    <div class="chart-top">
      <div class="unit">单位：{{ itemData.unit }}</div>
      <div class="chart-top-right">
        <div class="chart-item">
          <span class="label">最大值</span><span class="value">{{ itemData.max_num }}</span>
        </div>
        <div class="chart-item">
          <span class="label">最小值</span><span class="value">{{ itemData.min_num }}</span>
        </div>
      </div>
    </div>
    <div class="chart">
      <vptLine height="1.5rem"
               :xAxisData="xData"
               :chartData="chartData"
               v-bind="chartProps"
               :chartType="chartType"
               :tooltipName="truncateString(itemData.name)"></vptLine>
      <!-- <div class="empty-div">暂无数据</div> -->
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, watch, ref } from "vue";
import { fontSize } from "@/utils/rem/rem.js";
import vptLine from "@/components/echarts/vpt-line-002/index.vue";

const props = defineProps({
  itemData: {
    type: Object,
    required: true,
  },
  chartType: { type: String, default: "init" },
  xData: {
    type: Array,
    default: () => [],
  },
  chartData: {
    type: Array,
    default: () => [],
  },
});

const truncateString = (str) => {
  if (str) {
    return str.substring(7);
  }
  return '';
};

const chartProps = ref({
  // series: chartData.value.map((item, index) => {
  //   // console.log(item)
  //   return {
  //     data: item,
  //     type: "line",
  //     showSymbol: false,
  //   };
  // }),
  // chartTitle: "",
  // grid: {
  //   top: fontSize(20),
  //   bottom: 10,
  // },
  // legendProps: {
  //   show: false,
  //   top: fontSize(32),
  // },
  // lengendData: ["测试"],
  // chartData: [],
  // splitNumber: 3,
  // xAxisData: [],
  // showAxisLabel: false,
  // dataZoom: {
  //   show: true,
  //   endValue: 5,
  // },
});

const info_list = ref([]);
const xData = ref([]);
const chartData = ref([]);

watch(
  () => props.itemData,
  () => {
    info_list.value = JSON.parse(props.itemData.info_list || []);
    xData.value = info_list.value.map((item) => item.data_time);
    chartData.value = info_list.value.map((item) => Number(item.value));
  },
  { deep: true }
);

onMounted(() => {
  info_list.value = JSON.parse(props.itemData.info_list || []);
  xData.value = info_list.value.map((item) => item.data_time);
  chartData.value = info_list.value.map((item) => Number(item.value));
});
</script>

<style lang='less' scoped>
.vpt-chart-panel {
  width: 4.1rem;
  height: 1.95rem;
  margin-top: 0.16rem;
  padding: 0.16rem;
  // background: rgba(20, 112, 204, 0.1);
  background-image: linear-gradient(180deg, #f2f7ff 0%, #fdfeff 100%);
  // border: 0.01rem solid rgb(10, 50, 104);
  border: 0.01rem solid #ebebeb;
  margin-right: 0.16rem;
  .title {
    color: #151a24;
    font-size: 0.14rem;
    display: flex;
    align-items: center;
    img {
      width: 0.16rem;
      height: 0.16rem;
      margin-left: 0.05rem;
    }
  }

  .chart-top {
    display: flex;
    margin-top: 0.16rem;
    justify-content: space-between;
    .unit {
      color: #0d1c28;
    }
    .chart-top-right {
      display: flex;
      justify-content: right;
      .chart-item {
        margin-left: 0.2rem;
        .label {
          color: #86909c;
          font-size: 0.14rem;
        }
        .value {
          color: #0d1c28;
          font-size: 0.14rem;
          margin-left: 0.05rem;
        }
      }
    }
  }
  .chart {
    height: 1.48rem;
    .empty-div {
      color: #fff;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.vpt-chart-panel:nth-child(8n) {
  margin-right: 0;
}
</style>